﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        div {
            padding: 15px;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            //1.选择所有文本
            var mytextarea = document.getElementById("mytextarea");
            var mytext = document.getElementById("mytext");
            mytextarea.select();
            mytext.select();

            //部分文本
            mytextarea.setSelectionRange(0, 4);

            //选择文本事件
            mytextarea.addEventListener("select", function () {
                alert(mytextarea.value.substring(mytextarea.selectionStart, mytextarea.selectionEnd));
            }, false);

            //2.只能输入数值，屏蔽字符:不能屏蔽汉字
            var myCharForbidden = document.getElementById("myCharForbidden");
            myCharForbidden.addEventListener("keypress", function (event) {
                if (event.charCode < 49 || event.charCode > 57) {
                    event.preventDefault();
                }
            }, false);

            //3.自动获得焦点
            (function () {
                function autoChangeFocus(event) {
                    var target = event.target;
                    var form = target.form;
                    if (target.value.length === target.maxLength) {
                        for (var i = 0 ; i < form.elements.length ; i++) {
                            if (form.elements[i] == target && form.elements[i + 1]) {
                                form.elements[i + 1].focus();
                            }
                        }
                    }
                }

                document.getElementById("text1").addEventListener("keyup", autoChangeFocus, false);
                document.getElementById("text2").addEventListener("keyup", autoChangeFocus, false);
                document.getElementById("text3").addEventListener("keyup", autoChangeFocus, false);
            })();
        }
    </script>
</head>
<body>
    <form>
        <div>
            单行文本
            <input type="text" value="单行文本" maxlength="50" size="25" style=" width:300px" id="mytext" />
        </div>

        <div>
            多行文本
            <textarea rows="4" cols="80" id="mytextarea">这是多行文本</textarea>
        </div>

        <div>
            屏蔽字符
            <input id="myCharForbidden" />
        </div>



    </form>
    <form>
        <div>
            <ul>
                <li>
                    <input maxlength="3" id="text1"  />
                </li>
                <li>
                    <input maxlength="3" id="text2" />
                </li>
                <li>
                    <input maxlength="4" id="text3" />
                </li>
            </ul>
            <input type="submit" value="提交" />
        </div>


        
    </form>
</body>
</html>
